<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件的基本使用</title>
</head>
<body>
<!--
■人面对复杂问题的处理方式
  口任何一个人处理信息的逻辑能力都是有限的
  口所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
  口但是,我们人有一种天生的能力,就是将问题进行拆解。
  口如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。
■组件化也是类似的思想:
  口如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
  口但如果，我们讲一个页面拆分成一个个小的功能块每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
-->

<!--
■组件化是Vue.js中的重要思想
  口它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
  口任何的应用都会被抽象成一颗组件树。
■组件化思想的应用:
  口有了组件化的思想,我们在之后的开发中就要充分的利用它。
  口尽可能的将页面拆分成一个个小的、可复用的组件。
  口这样让我们的代码更加方便组织和管理,并且扩展性也更强。
-->

<!--
■组件的使用分成三个步骤
  口创建组件构造器
  口注册组件
  口使用组件。
■我们来看看通过代码如何注册组件
■查看运行结果:
  口和直接使用一个div看起来并没有什么区别。
  口但是我们可以设想,如果很多地方都要显示这样的信息,我们是不是就可以直接使用<my-cpn></my-cpn>来完成呢？
-->

<div id="app">

  <!--  3、组件的使用，注册组件时如果组件名称是驼峰命名，会按照驼峰拆分为以-拼接的名称-->
  <my-div></my-div>
</div>

<script src="../js/vue.js"></script>
<script>

  // 1、创建组件构造器，extend方法，传入一个对象，对象有个template属性，它的值就是我们要用的模板内容
  const myDiv = Vue.extend({
    /*如果是多个标签内容，必须在标签的最外层包裹一个父类标签，所有的标签都必须放在父类标签中，否则报错
    这里是<div>作为父类标签*/
    template: `
       <div>
         <h2>我是标题</h2>
         <p>我是内容一</p>
         <p>我是内容二</p>
       </div>`
  })

  // 2、全局注册组件，component方法，传入两个值，第一个参数为组件的名称，第二个参数为构造的组件对象
  Vue.component('myDiv', myDiv)

  const app = new Vue({
    el: "#app",
    data: {}
  });
</script>
</body>
</html>